<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素删除和插入操作</title>
		<!-- 元素删除和插入操作：针对 元素 增删改 
		append()           功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()          功能：在匹配元素集合中所有元素的内部开头插入内容
		
		after()            功能：在匹配元素集合中所有元素的外部后面插入内容
		before()           功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()           功能：使用前提：元素内容，删除元素
		empty()            功能：使用前提：元素内容，清空元素
		
		replaceWith()      功能：替换
		
		
		
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		button{
		margin: 5px;
		padding: 10px 15px;
		cursor: pointer;
		}
		body{
		margin: 20px;
		}
		#target{
		border: 1px solid #ffaaff;
		border-radius: 5px;
		padding: 10px;
		margin-top: 10px;
		}
		
		
		
		</style>
	</head>
	<body>
		<!-- 七个按钮  div套 p   div套 p -->
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		
		<!--1. 目标显示区 -->
		<div id="target">
			<p> ♥目标元素的默认段落♥ </p>
		</div>
		<!--2.替换和插入的元素块区域 -->
		<div id="newElement" style="display:none;">
			<p>🧟‍这是插入和替换的元素块段落👻</p>
		</div>
		
		<script>
			/*1. 点击  内部末尾插入 按钮  实现，选框内部末尾插入新元素*/
			$("#appendBtn").click(function(){
			 //插入新增元素----1.1 创建新元素---复制新元素 clone()
			 //根据抓到元素--复制出新元素---包含原有属性和样式
			 var nw=$("#newElement").clone();
			//1.2复制div加p空间元素，含原有属性---显示 display:block	
			nw.css("display","block");
			//1.3复制新元素并且改变属性【显示】，插入内部尾部
			$("#target").append(nw);
			});
			
			/*2.点击  内部开头插入 按钮  实现，选框内部开头插入新元素 */
			$("#prependBtn").click(function(){
				var pp=$("#newElement").clone();
				pp.css("display","block");
				$("#target").prepend(pp);
			});
			
			
			/*3.点击  外部后面插入 按钮  实现，选框外部后面插入新元素 */
			$("#afterBtn").click(function(){
				var at=$("#newElement").clone();
				at.css("display","block");
				$("#target").after(at);
			});
			
			/*4.点击  外部前面插入 按钮  实现，选框外部前面插入新元素 */
			$("#beforeBtn").click(function(){
				var bf=$("#newElement").clone();
				bf.css({"display":"block",
				       "width":"200px",
					   "height":"200px",
					   "background":"#55ffff",
					   "color":"transparent",
					   "border-radius":"50%",
				        "background-image":"url(../img/小狗03.gif)"
				});
				$("#target").before(bf);
			});
			
		 /*5.点击  删除和清空元素  按钮  真实删除元素 +清空元素操作*/
		 $("#removeBtn").click(function(){
			 $("#target").remove();
		 });
		 
		 $("#emptyBtn").click(function(){
		 			 $("#target").empty();
		 });
		 
		 /*6. 点击 替换元素  按钮  将当前效果替换新效果*/
		 $("#replaceWithBtn").click(function(){
			 //克隆 新元素效果 
			 var c=$("#newElement").clone().css("display","block");
		     $("#target").replaceWith(c);
		 });
		 
		 
		 
		</script>
	</body>
</html>